<!DOCTYPE html>
<html>
<head>
    <title>登录页面</title>
    <style>
        .container { width: 300px; margin: 100px auto; }
        .form-group { margin-bottom: 15px; }
        .error { color: red; margin-top: 5px; }
    </style>
</head>
<body>
    <div class="container">
        <form id="loginForm" action="/login" method="post">
            <div class="form-group">
                <label>用户:</label>
                <input type="text" id="username" autocomplete="username" name="username" required/>
            </div>
            <div class="form-group">
                <label>密码:</label>
                <input type="password" id="password" autocomplete="current-password" name="password" required/>
            </div>
            <button type="submit">登录</button>
            <div id="errorMessage" class="error"></div>
        </form>
    </div>

    <!-- <script>
        document.getElementById('loginForm').addEventListener('submit', function(e) {//添加提交时间的处理函数
            e.preventDefault();
            
            const errorElement = document.getElementById('errorMessage');//获取错误信息提示框
            errorElement.textContent = '';//设置错误信息提示框为空
            
            // 获取输入值
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            // 创建AJAX请求
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://localhost:5000/login'); // 向后台login接口发出post请求
            xhr.setRequestHeader('Content-Type', 'application/json');//设置以json格式发送请求数据
            
            xhr.onload = function() {//接受到后端返回数据后的处理函数，一般叫做回调函数
                try {
                    const response = JSON.parse(xhr.responseText);//接受返回数据，以json格式解析
                    if (xhr.status === 200 && response.success) {// 登录成功，跳转到后端服务提供的成功页面
                        errorElement.textContent = response.message;
                        window.location.href = 'http://localhost:5000/success';
                    } else {//登录失败，在错误提示框显示错误信息
                        errorElement.textContent ='登录失败，' + response.message ;
                    }
                } catch (e) {
                    errorElement.textContent = '服务器响应异常';
                }
            };
            
            xhr.onerror = function() {//发生连接超时或跨域请求被阻止等错误时错误提示框显示“网络连接失败”
                errorElement.textContent = '网络连接失败';
            };
            
            xhr.send(JSON.stringify({ username, password }));//向后台发送请求数据
        });
    </script> -->
</body>
</html>